<div class="form-box">
    <div style="flex:1"></div>


    <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()" class="form">



        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name" nzRequired>
                <span>
          姓名
        </span>
            </nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input id="name" formControlName="name">
                <!-- <nz-form-explain *ngIf="validateForm.get('name')?.dirty && validateForm.get('name')?.errors">请输入您的姓名！
        </nz-form-explain> -->
                <nz-form-explain *ngIf="validateForm.get('name')?.dirty&&validateForm.get('name')?.errors">
                    <ng-container *ngIf="validateForm.get('name')?.hasError('pattern')">
                        请输入中文姓名！（2-8）
                    </ng-container>
                    <ng-container *ngIf="validateForm.get('name')?.hasError('required')">
                        请输入您的姓名！
                    </ng-container>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>


        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>联系电话</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" [nzValidateStatus]="validateForm.controls['phoneNumber']">
                <!-- <nz-input-group [nzAddOnBefore]="addOnBeforeTemplate"> -->
                <!-- <ng-template #addOnBeforeTemplate>
            <nz-select formControlName="phoneNumberPrefix" style="width: 70px;">
              <nz-option nzLabel="+86" nzValue="+86"></nz-option>
              <nz-option nzLabel="+87" nzValue="+87"></nz-option>
            </nz-select>
          </ng-template> -->
                <input formControlName="phoneNumber" id="phoneNumber" nz-input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                <!-- </nz-input-group> -->
                <nz-form-explain *ngIf="validateForm.get('phoneNumber')?.dirty&&validateForm.get('phoneNumber')?.errors">
                    <ng-container *ngIf="validateForm.get('phoneNumber')?.hasError('pattern')">
                        无效的手机号
                    </ng-container>
                    <ng-container *ngIf="validateForm.get('phoneNumber')?.hasError('required')">
                        请输入您的手机号！
                    </ng-container>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>



        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">E-mail</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="email" id="email">
                <nz-form-explain *ngIf="validateForm.get('email')?.dirty&&validateForm.get('email')?.errors">
                    <ng-container *ngIf="validateForm.get('email')?.hasError('email')">
                        输入无效电子邮件！
                    </ng-container>
                    <ng-container *ngIf="validateForm.get('email')?.hasError('required')">
                        请输入您的电子邮件！
                    </ng-container>
                </nz-form-explain>

            </nz-form-control>
        </nz-form-item>




        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="sex" nzRequired>性别</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <div>
                    <nz-radio-group formControlName="sex">
                        <label nz-radio-button nzValue="0">男</label>
                        <label nz-radio-button nzValue="1">女</label>
                    </nz-radio-group>
                </div>
            </nz-form-control>
        </nz-form-item>



        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="username" nzRequired>学号</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input id="StudentId" formControlName="username" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
                <nz-form-explain *ngIf="validateForm.get('username')?.dirty&&validateForm.get('username')?.errors">
                    <ng-container *ngIf="validateForm.get('username')?.hasError('pattern')">
                        输入无效的学号！（10位纯数字）
                    </ng-container>
                    <ng-container *ngIf="validateForm.get('username')?.hasError('required')">
                        请输入您的学号！
                    </ng-container>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>


        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="grade" nzRequired>班级</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input id="banji" formControlName="grade" placeholder="格式：17软件3班">
                <!-- <nz-form-explain *ngIf="validateForm.get('grade')?.dirty&&validateForm.get('grade')?.hasError('required')">
          请输入您的班级！</nz-form-explain> -->
                <nz-form-explain *ngIf="validateForm.get('grade')?.dirty&&validateForm.get('grade')?.errors">
                    <ng-container *ngIf="validateForm.get('grade')?.hasError('pattern')">
                        格式错误 例：17软件3班
                    </ng-container>
                    <ng-container *ngIf="validateForm.get('grade')?.hasError('required')">
                        请输入您的班级！
                    </ng-container>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>


        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="direction" nzRequired>意向方向</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <!-- <div> -->
                <!-- <nz-radio-group formControlName="direction">
            <label nz-radio-button nzValue="0">前端</label>
            <label nz-radio-button nzValue="1">后端</label>
          </nz-radio-group> -->
                <!-- [nzDefaultExpandedKeys]="expandKeys" -->
                <nz-tree-select style="width: 120px" [nzNodes]="nodes" formControlName="directionId" nzPlaceHolder="--选择版块--" [(ngModel)]="language" nzShowExpand="false">
                </nz-tree-select>
                <nz-form-explain *ngIf="validateForm.get('directionId')?.dirty&&validateForm.get('directionId')?.errors">
                    <ng-container *ngIf="validateForm.get('directionId')?.hasError('required')">
                        请选择您的方向！
                    </ng-container>
                </nz-form-explain>
                <!-- </div> -->
            </nz-form-control>
        </nz-form-item>


        <!-- <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="languageType" nzRequired>主学语言</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <div>
          <nz-radio-group [(ngModel)]="addWe.languageType" formControlName="languageType">
            <label nz-radio-button nzValue="0">java</label>
            <label nz-radio-button nzValue="1">javaScript</label>
            <label nz-radio-button nzValue="2">C/C++</label>
            <label nz-radio-button nzValue="3">python</label>
            <label nz-radio-button nzValue="4">php</label>
            <label nz-radio-button nzValue="5">其他</label>
          </nz-radio-group>
        </div>
      </nz-form-control>
    </nz-form-item> -->


        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="qq" nzRequired=false>QQ</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input id="QQ" formControlName="qq" oninput="value=value.replace(/[^\d]/g,'')">
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="weChat" nzRequired=true>微信号</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input id="Wechat" formControlName="weChat">
                <nz-form-explain *ngIf="validateForm.get('weChat')?.dirty&&validateForm.get('weChat')?.errors">
                    <ng-container *ngIf="validateForm.get('weChat')?.hasError('pattern')">
                        输入无效的微信号！
                    </ng-container>
                    <ng-container *ngIf="validateForm.get('weChat')?.hasError('required')">
                        请输入您的微信！
                    </ng-container>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>




        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired>自我介绍</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <textarea formControlName="comment" nz-input rows="2" placeholder="简短介绍自己！(10-50字符)"></textarea>
                <nz-form-explain *ngIf="validateForm.get('comment')?.dirty&&validateForm.get('comment')?.hasError('required')">
                    请简短介绍自己！(10-50字符)
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>


        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="StudentId" nzRequired=true>名片照</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24" style="max-width:320px">
                <!-- nzAction="http://39.105.96.239:8081/file" -->
                <!-- <nz-upload  nzListType="picture-card" [(nzFileList)]="fileList"
            [nzShowButton]="fileList.length < 1" [nzShowUploadList]="showUploadList" [nzPreview]="handlePreview" 
              nzLimit="true" nzSize=5120 nzFileType="image/png,image/jpeg" (nzChange)="handleChange($event)" [nzRemove] = "removeFile" [nzBeforeUpload]="beforeUpload" >
            
              <i nz-icon type="plus" nz-tooltip nzTitle="支持类型： png, jpeg"></i>
            <div class="ant-upload-text" nz-tooltip nzTitle="支持类型： png, jpeg">长传图片(<=5M)</div>
          </nz-upload> -->
                <nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload" [nzShowButton]="fileList.length < 1" nzSize=5120 nzFileType="image/png,image/jpeg">
                    <div style="border:1px solid #eee;border-radius: 3px; padding: 4px" class="upload">
                        <i nz-icon type="upload" style="margin:0px 4px"></i><span>照片上传</span>
                    </div>

                </nz-upload>


                <!-- <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
        <ng-template #modalContent>
          <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
        </ng-template>
      </nz-modal> -->
            </nz-form-control>
        </nz-form-item>

        <nz-form-item nz-row style="margin-bottom:8px">
            <nz-form-control [nzSpan]="14" [nzOffset]="6">
                <button nz-button nzType="primary">提交</button>
            </nz-form-control>
        </nz-form-item>
    </form>


    <div style="flex:1"></div>
</div>